import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { cartAction, updateCartAction, checkedCartAction, delGoodstAction } from '../../../store/actions';
import style from './index.module.scss';
interface Iprops {
    getCart: () => void,
    updateCart: (goodsId: string, id: string, number: string, productId: string) => void,
    checked: (isChecked: number, productIds: string) => void,
    delGoods: (productIds: string) => void,
    updateFlag: (list: Array<any>) => void,
    changeFlag: (id:number) => void,
    editAllFlag: () => void,
    initFlag: () => void,
    cartList: Array<object>,
    cartTotal: { [key: string]: any },
}

const Cart: React.FC<Iprops> = props => {
    useEffect(() => {
        props.getCart();
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [])
    const { cartList, cartTotal } = props;
    const [flag, setFlag] = useState(false);//编辑开关
    const [allChecked, setAllChecked] = useState(false);//初始全选开关
    const [editChecked, setEditChecked] = useState(false);//编辑全选开关
    const [count, setCount] = useState(0);////编辑后选中数量

    useEffect(() => {
        if (cartList&&cartList.length) {
            setAllChecked(
                cartList&&cartList.every((item: { [key: string]: any }) => {
                    return item.checked
                })
            );
            setEditChecked(
                cartList&&cartList.every((item: { [key: string]: any }) => {
                    return item.delChecked
                })
            );
            setCount(
                cartList&&cartList.filter((item: { [key: string]: any }) => {
                    return item.delChecked
                }).length
            )
        }
    // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [cartList])
   
    const handle = (type: string, item: { [key: string]: any }) => {//数量加减
        let { number } = item;
        if (type === 'add') {
            ++number
        } else if (type === 'reduce') {
            if (number < 2) return;
            --number
        }
        props.updateCart(item.goods_id, item.id, number, item.product_id)
    }
    const checked = (item: { [key: string]: any }) => {
        if (flag) {//编辑后商品的选中状态
            return props.changeFlag(item.id)
        }
        let { checked } = item;
        props.checked(checked === 1 ? 0 : 1, item.product_id)
    }
    const changeChecked = () => {
        if(flag){
            return props.editAllFlag()
        }
        cartList.forEach((item: { [key: string]: any }) => {//完成后选中总开关
            props.checked(!allChecked ? 1 : 0, item.product_id)
        })
    }
    const delFunc = () => {
        if(flag){//删除商品
            cartList.forEach((item: { [key: string]: any }) => {
                if (item.delChecked) {
                    props.delGoods(`${item.product_id}`)
                }
            })
            return
        }
        alert('下单功能未开发')
    }
    const changeFlag = ()=>{
        setFlag(!flag);
        if(!flag){
            props.initFlag()
        }
    }
    return <div className={style.cart}>
        <div className={style.merit}>
            <span><b>★</b> 30天无忧退货</span>
            <span><b>★</b> 48小时快速退款</span>
            <span><b>★</b> 满88元免邮费</span>
        </div>
        <div className={style.content}>
            {
                cartList&&cartList.map((item: any) => {
                    return <div
                        className={style.item}
                        key={item.id}
                    >
                        <div>
                            <span
                                className={flag ? (item.delChecked ? style.active : "") : (item.checked === 1 ? style.active : "")}
                                onClick={() => checked(item)}
                            >✓</span>
                        </div>
                        <div>
                            <img src={item.list_pic_url} alt="" />
                        </div>
                        {
                            flag
                                ?
                                <div>
                                    <p>已选择： {item.goods_specifition_name_value}</p>
                                    <p></p>
                                    <p>￥ {item.retail_price}</p>
                                    {
                                        flag
                                            ?
                                            <div className={style.handle}>
                                                <span onClick={() => handle('reduce', item)}>-</span>
                                                <span>{item.number}</span>
                                                <span onClick={() => handle('add', item)}>+</span>
                                            </div>
                                            :
                                            null
                                    }
                                </div>
                                :
                                <div>
                                    <p>{item.goods_name}</p>
                                    <p></p>
                                    <p>￥ {item.retail_price}</p>
                                </div>
                        }

                        <div>
                            {
                                flag
                                    ?
                                    null
                                    :
                                    <span>x {item.number}</span>
                            }
                        </div>
                    </div>
                })
            }
        </div>
        <div className={style.footer}>
            <div>
                <span
                    className={flag ? (editChecked ? style.active : "") : (allChecked ? style.active : "")}
                    onClick={changeChecked}
                >✓</span>
            </div>
            <div>
                <span>已选 ({
                    flag
                        ?
                        count
                        :
                        cartTotal && cartTotal.checkedGoodsCount
                })</span>
            </div>
            <div>
                {
                    flag
                        ?
                        null
                        :
                        <span>
                            ￥ {cartTotal && cartTotal.checkedGoodsAmount}
                        </span>
                }

            </div>
            <div>
                <span onClick={changeFlag}>{flag ? '完成' : '编辑'}</span>
            </div>
            <div>
                <button onClick={delFunc}>{flag ? '删除所选' : '下单'}</button>
            </div>
        </div>
    </div>
}
const mapStateToProps = (state: any) => {
    return state.cart
}
const mapDispatchToProps = (dispatch: Function) => {
    return {
        getCart: () => {
            dispatch(cartAction());
        },
        updateCart: (goodsId: string, id: string, number: string, productId: string) => {
            dispatch(updateCartAction(goodsId, id, number, productId))
        },
        checked: (isChecked: number, productIds: string) => {
            dispatch(checkedCartAction(isChecked, productIds))
        },
        delGoods: (productIds: string) => {
            dispatch(delGoodstAction(productIds))
        },
        updateFlag: (list: Array<any>) => {
            dispatch({type:'UPDATE_FLAG',payload:{cartList:list}})
        },
        changeFlag: (id:number) => {
            dispatch({type:'CHANGE_FLAG',payload:{id}})
        },
        editAllFlag: () => {
            dispatch({type:'EDIT_ALL_FLAG',payload:""})
        },
        initFlag: () => {
            dispatch({type:'INIT_FLAG',payload:""})
        },
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(Cart) 
